{extend name="common/base" /}
{block name="body"} 
<main>
    <div class="help-block">
        <div class="container layui-row layui-col-space32">
            <h1 class="com-plate-title">Help</h1>
            <div class="company-item" id="customer">
                <div class="company-item-title">customer service</div>
                {$customer_service.content|raw}
                <div class="layui-row layui-col-space32 help-question" id="Shippuing">
                    <div class="layui-col-md6 layui-col-xs12">
                        <h2>Preset questions:</h2>
                        <div class="layui-collapse help-collapse" lay-accordion>
                            {if count($questions)} 
                                {volist name="questions" id="question"}  
                                    <div class="layui-colla-item">
                                        <div class="layui-colla-title">{$i}、{$question.question}</div>
                                        <div class="layui-colla-content ">
                                            {$question.answer}
                                        </div>
                                    </div>
                                {/volist} 
                            {/if}
                        
                        </div>
                    </div>
                    <div class="layui-col-md6 layui-col-xs12">
                        <h2>Anymore question?</h2>
                        <form class="help-form">
                            <textarea id="question" placeholder="Anymore question?"></textarea>
                            <div class="center_box">
                                <button class="help-btn" id="submit-question">Submit</button>
                            </div>
                        </form>
                        <div class="help-form-text">
                            More ways to contact us: <br>Email:{$config.email|default=''}<br>{$config.tel|default=''}
                        </div>
                    </div>
                </div>
            </div>
            <div class="hr_img" id="Reture">
                <!-- <img src="images/line.png"> -->
            </div>
            <div class="company-item">
                <div class="company-item-title">Reture policy</div>
                <div class="com-content ">
                    Unfortunately due to the intimate nature of our product, we do not accept returned items.
                    However we do have insurance policy to provide a new product in the case of damage for an
                    additional fee.

                </div>
                <div class="center_box">
                    <button class="help-btn"  lay-on="help-dialog-reture">LEARN MORE ABOUT INSURANCE POLICY</button>
                </div>
            </div>
            <div class="hr_img" id="insurcame">
                <!-- <img src="images/line.png"> -->
            </div>
            <div class="company-item">
                <div class="company-item-title">insurcame polily</div>
                <div class="com-content ">
                    Have you ever thought about insuring your lingerie? <br>
                    Our insurance for your beloved set of lingerie give you the following benefits: <br>
                    Free replacement pair if the original pair is damage. <br>
                    Free replacement pair after 3 months of purchase for a new size that fits you better

                </div>
                <div class="center_box">
                    <button class="help-btn" lay-on="help-dialog-insurcame">LEARN MORE ABOUT INSURANCE POLICY</button>
                </div>
            </div>
            <div class="hr_img" id="track">
                <!-- <img src="images/line.png"> -->
            </div>
            <div class="company-item">
                <div class="company-item-title">track my order</div>
                <form class="help-form layui-row layui-col-space20">
                    <div class="layui-col-md9 layui-col-xs12">
                        <div class="input-style">
                            <input id="order_no" placeholder="Enter tracking number(s)">
                        </div>
                    </div>
                    <div class="layui-col-md3 layui-col-xs12">
                        <button class="help-btn" id="track_order">Track</button>
                    </div>
                </form>

                <h2 class="">Delivery By AU Post</h2>
                <div class="com-content">Tracking lD: CoDE5156931</div>
                <ul class="help_time_list">
                    <li>
                        <p class="title">Friday, 11 0ctober</p>
                        <dl>
                            <dd>
                                <span class="time">1:15 PM</span>
                                <span class="content">Delivered<br>Turner, AU</span>
                            </dd>
                            <dd>
                                <span class="time">8:08 AM</span>
                                <span class="content">Out for delivery<br>Queanbeyan, AU</span>
                            </dd>
                            <dd>
                                <span class="time">5:51 AM</span>
                                <span class="content">Package arrived at a carrier<br>facilityQueanbeyan, AU</span>
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <p class="title">Thursday, 10 October</p>
                        <dl>
                            <dd>
                                <span class="time"></span>
                                <span class="content">Package left the shipper facility</span>
                            </dd>
                        </dl>
                    </li>
                </ul>
            </div>
            <div class="hr_img" id="payment">
                <!-- <img src="images/line.png"> -->
            </div>
            <div class="company-item">
                <div class="company-item-title">Payment Method</div>
                <div class="com-content ">
                    we accept the following payment method.<br>
                    Pay by paypal<br>
                    Pay by afterpay<br>
                    Add card<br>
                    Credit card option<br>
                    Add details<br>
                    Debit card option<br>
                    Add details<br>
                    Other options<br>
                    Pay cash at arrival<br>
                </div>
            </div>
        </div>
    </div>
       
    
</main>
<div class="reture_policy" style="display: none;">
    <h1>Reture policy</h1>
    {$reture_policy.content|raw}
</div>
<div class="insurcame_polily" style="display: none;">
    <h1>Insurance term and policy</h1>
    {$insurcame_polily.content|raw}
</div>
{/block}
{block name="js"} 
    <script>
        var util = layui.util;
        util.on('lay-on', {
            'help-dialog-reture': function () {
                    layer.open({
                        type: 1,
                        area: ['1000px', 'auto'], // 宽高
                        title: false, // 不显示标题栏
                        closeBtn: 1,
                        shadeClose: true, // 点击遮罩关闭层
                        skin: 'help-dialog',
                        content:$('.reture_policy')
                    });
                },
                'help-dialog-insurcame': function () {
                    layer.open({
                        type: 1,
                        area: ['1000px', 'auto'], // 宽高
                        title: false, // 不显示标题栏
                        closeBtn: 1,
                        shadeClose: true, // 点击遮罩关闭层
                        skin: 'help-dialog',
                        content:$('.insurcame_polily')
                    });
                },
            },
         
        )
        
        $('#submit-question').on('click', function () {
            const question = $('#question').val().trim();

            // 验证输入
            if (!question) {
                return layui.layer.msg('Question is required.', {icon: 2});
            }
           
            
            // 发送登录请求
            const data = { question: question };
            ajaxRequest('/question', data, 'POST', this, function (response) {
                layer.msg('Submit SUCCESS', {icon: 1, time: 2000}, function() {
                    // 弹窗消失后跳转
                    window.location.reload(); // 替换为目标页面的 URL
                });
            });
        });

        $('#track_order').on('click', function () {
            const order_no = $('#order_no').val().trim();

            // 验证输入
            if (!order_no) {
                return layui.layer.msg('Order_no is required.', {icon: 2});
            }
           
            
            // 发送登录请求
            const data = { order_no: order_no };
            ajaxRequest('/track_order', data, 'POST', this, function (response) {
                layer.msg('track SUCCESS', {icon: 1, time: 2000}, function() {
                    // 弹窗消失后跳转
                    window.location.reload(); // 替换为目标页面的 URL
                });
            });
        });
    </script>
{/block}